<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@include file="common/head.jsp"%>
<div id="category_top">
    <div class="am-hide-lg-only kz" id="leftbtn">
        <i class="am-icon-angle-left" ></i>
    </div>
    <div class="am-hide-lg-only kz" style="right:0px;" id="rightbtn">
        <i class="am-icon-angle-right"></i>
    </div>
    <div class="am-container" >
                  <form method="post" action="${pageContext.request.contextPath}/Thematics">
					 <input type="hidden" name="pageIndex" value="1"/>
					
				</form>
    </div>

</div>

<script>
    var countnum=5 //一共多少个图 例如6个请输入5
    $("#leftbtn").click(function(){c
        var temp_href=$("#topface li:eq(0) a").attr("href");
        var temp_img=$("#topface li:eq(0) img").attr("src");
        var temp_h3=$("#topface li:eq(0) h3").html();
        var temp_p=$("#topface li:eq(0) p").html();

        for (i=0; i<countnum; i++){
            var n=i+1;
            $("#topface li:eq("+i+") a").attr('href',$("#topface li:eq("+n+") a").attr("href"));
            $("#topface li:eq("+i+") img").attr('src',$("#topface li:eq("+n+") img").attr("src"));
            $("#topface li:eq("+i+") h3").html($("#topface li:eq("+n+") h3").html());
            $("#topface li:eq("+i+") p").html($("#topface li:eq("+n+") p").html());
        };
        $("#topface li:eq("+countnum+") a").attr('href',temp_href);
        $("#topface li:eq("+countnum+") img").attr('src',temp_img);
        $("#topface li:eq("+countnum+") h3").html(temp_h3);
        $("#topface li:eq("+countnum+") p").html(temp_p);
    });
    $("#rightbtn").click(function(){
        var temp_href=$("#topface li:eq("+countnum+") a").attr("href");
        var temp_img=$("#topface li:eq("+countnum+") img").attr("src");
        var temp_h3=$("#topface li:eq("+countnum+") h3").html();
        var temp_p=$("#topface li:eq("+countnum+") p").html();

        for (i=countnum; i>0; i--){
            var n=i-1;
            $("#topface li:eq("+i+") a").attr('href',$("#topface li:eq("+n+") a").attr("href"));
            $("#topface li:eq("+i+") img").attr('src',$("#topface li:eq("+n+") img").attr("src"));
            $("#topface li:eq("+i+") h3").html($("#topface li:eq("+n+") h3").html());
            $("#topface li:eq("+i+") p").html($("#topface li:eq("+n+") p").html());
        };
        $("#topface li:eq(0) a").attr('href',temp_href);
        $("#topface li:eq(0) img").attr('src',temp_img);
        $("#topface li:eq(0) h3").html(temp_h3);
        $("#topface li:eq(0) p").html(temp_p);
    });
</script>
             
<div id="cattit">
    <ul class="am-avg-sm-2 am-avg-md-2 am-avg-lg-2">
        <li><h3><a href="#">专题列表</a></h3></li>
     <!--    <li  class="active-none"><h3><a href="#">个人专栏</a></h3></li> -->
    </ul>
</div>
<hr data-am-widget="divider" style="" class="am-divider am-divider-default" />
<div id="cattlist" class="am-container">
    <ul class="am-avg-sm-1 am-avg-md-3 am-avg-lg-4">
        
        <c:forEach  items="${ThematicPageInfo.list}"  var="Thematic">
         <li>
                <div class="cattlist_0">
		                <div class="cattlist_1">
		                    <div class="am-g">
		
		                        <div class="am-u-sm-8 am-u-md-7 am-u-lg-7">
		
		                            <h3>${Thematic.name}</h3>
		                           <!--  <h4>AmazeUI</h4>
		                            <p>文章<span>9</span></p> -->
		                        </div>
		                    </div>
		                </div>
               <!--  <div class="cattlist_2">
                    <p>
                        设计的空间发生快，乐十分的骄傲了开发奥斯卡的房间辣椒反馈。发奥斯卡的房间辣椒反馈。设计的空间发生快，
                    </p>
                </div> -->
                <div class="cattlist_3">
                    <span  class="am-btn am-btn-warning">
                        <i class="am-icon-plus"></i>
                      <a href="${pageContext.request.contextPath}/articlelist?thematicid=${Thematic.id}" style="color: white;">进入专题</a>
                    </span>
                </div>
            </div>
        </li>
        </c:forEach>
          

       
    </ul>
</div>

<div class="am-container" style="margin: 100px auto">
<input type="hidden" id="totalPageCount" value="${ThematicPageInfo.pages}">
      <c:import url="rollpage.jsp">
	          	<c:param name="totalCount" value="${ThematicPageInfo.total}"/>
	          	<c:param name="currentPageNo" value="${ThematicPageInfo.pageNum}"/>
	          	<c:param name="totalPageCount" value="${ThematicPageInfo.pages}"/>
      </c:import>
</div>
<div data-am-widget="gotop" class="am-gotop am-gotop-fixed" >
    <a href="#top" title="回到顶部">
        <span class="am-gotop-title">回到顶部</span>
        <i class="am-gotop-icon am-icon-chevron-up"></i>
    </a>
</div>
<%@include file="common/foot.jsp"%>